import type {
  PowerfulFormExpose,
  PowerfulFormPTHeaders,
} from 'el-plus-powerful-form'
import { Download, Edit, Plus, Upload, View } from '@element-plus/icons-vue'
import type { BtnConfig } from 'el-plus-powerful-table'

export const useListOperate = <Row = any>() => {
  const headerOperateColumn: PowerfulFormPTHeaders<Row> = {
    label: '操作', //显示的标题
    fixed: 'right',
    props: [
      {
        type: 'btn',
        prop: 'btn',
        data: [
          {
            tip: '查看',
            params: {
              emit: 'view',
            },
            property: {
              type: 'primary',
              icon: markRaw(View),
            },
          },
          {
            tip: '编辑按钮',
            params: {
              emit: 'update',
            },
            property: {
              type: 'info',
              icon: markRaw(Edit),
            },
          },
          [
            {
              text: '更多',
              isMore: true,
              property: {
                icon: markRaw(Edit),
              },
            },
            {
              text: '删除',
              params: {
                emit: 'delete',
              },
              beforeClick(_, resolve) {
                ElMessageBox.confirm('正在进行删除操作，确认要删除？', '提示', {
                  confirmButtonText: 'OK',
                  cancelButtonText: 'Cancel',
                  type: 'error',
                }).then(() => {
                  resolve(true)
                })
              },
              property: {
                type: 'danger',
                icon: markRaw(Edit),
              },
            },
          ],
        ],
      },
    ],
  }
  const visible = ref(true)

  const btnConfig = reactive({
    btnRightList: [
      {
        effect: 'refresh',
        property: {
          icon: markRaw(Upload),
          type: 'primary',
        },
      },
    ],
    btnList: [
      {
        text: '新增',
        effect: 'add',
        property: {
          icon: markRaw(Plus),
          type: 'primary',
        },
      },
    ],
  } satisfies BtnConfig.Config<Row>)

  const handleVisibleForm = (
    visibleFormTrigger: PowerfulFormExpose['visibleFormTrigger'] | undefined,
  ) => {
    visible.value = !!visibleFormTrigger?.()
    btnConfig.btnRightList[0].property.icon = markRaw(
      visible.value ? Upload : Download,
    )
  }

  return {
    headerOperateColumn,
    btnConfig,
    handleVisibleForm,
    visibleForm: visible,
  }
}
